<template>
  <div class="books-list">
    <mt-header title="书单" fixed>
      <router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div class="list_con">
      <mt-navbar v-model="selected">
        <mt-tab-item id="1">书单</mt-tab-item>
        <mt-tab-item id="2">历史</mt-tab-item>
      </mt-navbar>
      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="1">
          <div class="items">
            <cross-itme />
            <cross-itme />
          </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
          <div class="items">
            <cross-itme />
          </div>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
  </div>
</template>

<script>
import CrossItme from "@/components/CrossItme.vue";
export default {
  components: { CrossItme },
  name: "page-nacbar",
  data() {
    return {
      selected: "1",
    };
  },
};
</script>

<style lang="scss" scoped>
.books-list {
  .mint-header {
    background: transparent;
    color: #505050;
    border-bottom: 1px solid #f5f5f5;
  }
  .list_con {
    margin-top: 46px;
    .mint-navbar {
      margin-bottom: -0.9rem;
      a {
        margin: 0 3rem;
        padding: 0.8rem 0; 
      }
      
    }
  }
}
</style>